<template>
  <div class="container" :class="{
    hideTree,
  }">
    <el-button @click="changeTreeStatus" :icon="DArrowLeft"></el-button>
    <div class="main">
      <div class="title">
        <span>图层目录</span>
      </div>
      <div class="content">
        <el-tree :data="layerData" :props="defaultProps" node-key="id" :default-expanded-keys="[1, 2]"
          :default-checked-keys="[1]">
          <template #default="scope">
            <div class="custom-node">
              <input type="checkbox" v-if="scope.node.id > 2" v-model="checked" :value="scope.node.id - 3"
                @change="changeState()" />
              <img :src="iconType(scope.node.id - 3)" alt="" />
              <span>{{ scope.node.label }}</span>
            </div>
          </template>
        </el-tree>
      </div>
    </div>
  </div>
</template>

<script setup>
import { DArrowLeft } from '@element-plus/icons-vue';

const $map = ref(null);
const guangguLayers = ref([]);

//图层目录树的显示与隐藏
let hideTree = ref(false);
const changeTreeStatus = () => {
  hideTree.value = !hideTree.value;
};

const defaultProps = {
  children: 'children',
  label: 'label',
  disabled: 'disabled',
};
const layerData = ref([]);

//被选中要素图层
const checked = ref([]);

onMounted(() => {
  $map.value = inject('$map');
  //获取图层目录
  var docCatoLog = new Zondy.Catalog.MapDoc({
    docName: 'guanggu',
  });
  docCatoLog.getLayersInfo((data) => {
    guangguLayers.value = data.value;
    checked.value = data.value.map((item) => item.LayerIndex);
    const layerName = ref([]);
    layerName.value = guangguLayers.value.map((item, index) => {
      return {
        id: index + 3,
        label: item.Name,
      };
    });
    layerData.value = [
      {
        id: 1,
        label: '地图文档',
        children: [
          {
            id: 2,
            label: '光谷智慧交通',
            children: layerName.value,
          },
        ],
      },
    ];
  });
});

//复选框的change事件
const changeState = () => {
  $map.value.getLayers().array_[4].setLayerStatus(checked.value, 'show');
};

//定义图层样式图标的src地址
const iconType = (value) => {
  if (value < 0) {
    return 'src/assets/tree_icon/top.png';
  }
  const type = guangguLayers.value[value].GeomType;
  switch (type) {
    case 'Reg':
      return 'src/assets/tree_icon/area.png';
    case 'Lin':
      return 'src/assets/tree_icon/line.png';
    case 'Pnt':
      return 'src/assets/tree_icon/point.png';
  }
};
</script>

<style lang="scss" scoped>
.container {
  position: fixed;
  top: 80px;
  left: 0;
  width: 200px;
  height: 600px;
  background-color: #ffffff99;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  transition: transform 1s;

  .el-button {
    position: absolute;
    background: #cdcdcd;
    width: 30px;
    height: 100px;
    right: 0;
    top: 50%;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-color: #cdcdcd;
    transform: translateY(-50%);
    transition: all 0.5s;

    &:hover {
      border-color: #cdcdcd;
      background: #b2b2b2;
    }

    :deep(.el-icon) {
      color: white;
      font-size: 20px;
    }
  }

  .main {
    height: 100%;

    .title {
      height: 40px;
      background-color: #398feb;
      padding-left: 15px;
      border-top-right-radius: 20px;

      span {
        color: white;
        font-weight: 600;
        line-height: 40px;
      }
    }

    .content {
      padding-top: 5px;

      .el-tree {
        background: transparent;
      }

      .custom-node {
        display: flex;
        align-items: center;

        input {
          margin-right: 5px;
          cursor: pointer;

          &[type='checkbox'] {
            /*清除复选框默认样式*/
            --webkit-appearance: none;
            border: 1px solid #3b3b3b;
            vertical-align: middle;
            width: 14px;
            height: 14px;
            border-radius: 0;
            background-color: #eeeeee;
            border-radius: 2px;
          }

          &[type='checkbox']:checked {
            background: url('src/assets/tree_icon/right-black.png');
            background-size: contain;
          }
        }

        img {
          padding-right: 5px;
          width: 19px;
        }

        span:nth-child(-n + 2) {
          color: #3f96ee;
        }
      }
    }
  }
}

.hideTree {
  transform: translateX(-100%);

  .el-button {
    border-radius: 0;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    transform: translateY(-50%) translateX(30px);

    :deep(.el-icon) {
      transform: rotate(180deg);
    }
  }
}
</style>
